<template>
  <section class="chart_box">
    <span>{{title}}</span>
    <div ref="chartBox" style="margin: auto;"></div>

  </section>
</template>

<script>
import echarts from "echarts";

export default {
  name:"chart",
  props:{
    title:{
      type:String
    },
    chartData:{
      type:Object
    }
  },
  mounted(){
    let w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
    this.$refs.chartBox.style.width = (w)+'px';
    this.$refs.chartBox.style.height = (w)*2/3+'px';
    const chart = echarts.init(this.$refs.chartBox);
    chart.setOption({
      backgroundColor:'#fff',
      // tooltip: {
      //   trigger: 'axis',
      //   show: true,
      //   triggerOn:"click",  
      //   showContent:true, 
      // },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross'
        }
    },
    toolbox: {
        show: true,
        feature: {
            saveAsImage: {}
        }
    },
      grid: {
        x: '50px',
        top :'20px'
      },
      xAxis: {
        type: "category",
        boundaryGap: false,
        axisTick: {
          //坐标轴刻度相关设置
          show: true, //是否显示坐标轴刻度。
          inside: false, //坐标轴刻度是否朝内，默认朝外。
          length: 1 //坐标轴刻度的长度。
        },
        data: this.chartData.date,
        splitLine: {
          //坐标轴在 grid 区域中的分隔线。
          show: true, 
        },
        axisLabel: {
          rotate: 60,
        }
      },
      yAxis: {
        type: "value",
        scale :true,
        // splitNumber: 8,
        axisTick:{
          show:true,
          length :1
        }
      },
      series: [
        {
          type: "line",
          data: this.chartData.value,
          areaStyle: {
            // 填充渐变
            normal:{
              color:'#ffe8e8'
            }
          }
        }
      ],
      lineStyle: {
        width: 1,
        type: "solid",
        color: "#A00500"
      },
      // itemStyle: {
      //   // 小圆点颜色
      //   type: "solid",
      //   color: "#A00500",
      // },
    });
  }
}
</script>

<style>
.chart_box{
  background: #fff;
  border-bottom: 0px #eee solid;
}
.chart_box div{
  border-radius: 5px;
}
.chart_box span{
  padding: 0px 20px;
  display: block;
  background: #fff;
  border-bottom: 1px #eee solid;
  color: #333333;
  font-weight: bold;
}
</style>
